<script lang="ts">
//类型推断
import {defineComponent} from 'vue'


type Count = number|string

interface List {
  username:string
  age:number
}

export default defineComponent({
  name: "01_选项式api与ts",
  data(){
    return{
      //断言
      count:0 as Count,
      list : [] as List[]
    }
  },
  mounted(): any {
    this.count = 123;
    //this.count = '123';
    this.list.push({username:'123',age:123})
  },
  computed:{
    doubleCount(): number| string{
      if(typeof this.count === 'number'){
        return this.count * 2
      }else{
        return this.count
      }
    }
  },
  methods:{
    handleClick(n:number){
      console.log(n)
      if(typeof this.count === 'number'){
        console.log(n)

        this.count+=n
      }
    }
  }
})
</script>

<template>
  <div>
    {{count}},{{doubleCount}},{{list}}
    <h2>hello 01</h2>
    <button @click="handleClick(1)">+</button>
  </div>

</template>

<style scoped>

</style>